<template>
    <div class="jy-login">
        <img src="~@/assets/images/loginBak/newBG.png" alt="logo" class="img"/>
        <div class="login">
            <div class="login-content">
                <p class="system-name">{{ systemTitle }}</p>
                <a-form
                    class="login-form"
                    ref="loginForm
"
                    :model="loginForm"
                    :rules="loginRules"
                    :form="form"
                >
                    <a-form-item prop="account">
                        <a-input
                            ref="account"
                            placeholder="输入用户名"
                            v-decorator="[
                'account',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入用户名',
                    },
                  ],
                },
            ]"
                        >
                            <template #prefix>
                                <img src="~@/assets/images/loginBak/yonghu.png" alt="account" style="width: 15px"/>
                            </template>
                        </a-input>
                    </a-form-item>
                    <a-form-item prop="password">
                        <a-input
                            ref="password"
                            type="password"
                            show-password
                            placeholder="输入密码"
                            v-decorator="[
                'password',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入密码',
                    },
                  ],
                },
            ]"
                        >
                            <template #prefix>
                                <img src="~@/assets/images/loginBak/ziyuan.png" alt="account" style="width: 15px"/>
                            </template>
                        </a-input>
                    </a-form-item>
                    <a-form-item prop="verificationCode">
                        <a-input
                            ref="verificationCode"
                            placeholder="请输入验证码"
                            v-decorator="[
                'verificationCode',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入验证码',
                    },
                  ],
                },
            ]"
                        >
                            <template #prefix>
                                <img src="~@/assets/images/loginBak/yanzhengma.png" alt="account" style="width: 15px"/>
                            </template>
                        </a-input>
                        <img
                            class="code"
                            :src="verificationCodeUrl"
                            @click="reloadVerificationCodeUrl"
                        />
                    </a-form-item>

                    <a-form-item prop="phone" :rules="phoneRules">
                        <a-input
                            ref="phone"
                            placeholder="输入手机号"
                            v-decorator="[
                'phone',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入手机号',
                    },
                  ],
                },
            ]"
                        >
                            <template #prefix>
                                <img src="~@/assets/images/loginBak/shoujihao.png" alt="account" style="width: 15px"/>
                            </template>
                        </a-input>
                    </a-form-item>
                    <a-form-item prop="code">
                        <a-input
                            ref="code"
                            placeholder="输入短信验证码"
                            v-decorator="[
                'code',
                {
                  rules: [
                    {
                      required: true,
                      message: '请输入短信验证码',
                    },
                  ],
                },
            ]"
                        >
                            <template #prefix>
                                <img src="~@/assets/images/loginBak/yanzhengma.png" alt="account" style="width: 15px"/>
                            </template>
                        </a-input>
                        <a-button class="code" type="success" :loading="showLoading.codeBtn" v-show="timerMgr.showCon" @click="getSmsCode" >发送验证码</a-button>
                        <a-button class="code" icon="el-icon-time" type="success" v-show="!timerMgr.showCon"  >{{ timerMgr.countCon }} 秒</a-button>
                    </a-form-item>
                    <a-button
                        class="jy-login-btn"
                        type="text"
                        :loading="showLoading.loginLoading"
                        @click.native.prevent="handleLogin('loginForm')"
                    >
                        登 录
                    </a-button>
                </a-form>
            </div>
        </div>
    </div>
</template>
<script>
import { getSmsCode } from '@/api/system/account.js'
import { projectTitle, axiosBaseUrl } from '@/common/config/baseConfig'
import Cookies from 'js-cookie'
import { validPhoneEmpty } from '@/common/validate/formValidate'
export default {
    beforeCreate () {
        this.form = this.$form.createForm(this, { name: 'register' })
    },
    data () {
        const validVerificationCode = (rule, value, callback) => {
            const verificationCode = Cookies.get('verificationCode')
            if (!value) {
                callback(new Error('请输入验证码'))
            } else if (value.toLowerCase() !== verificationCode.toLowerCase()) {
                callback(new Error('验证码不正确'))
            } else {
                callback()
            }
        }
        return {
            phoneRules: { validator: validPhoneEmpty, trigger: 'blur' },
            timerMgr: {
                countCon: 60,
                showCon: true,
                timerCon: null
            },
            systemTitle: projectTitle,
            showLoading: {
                loginLoading: false,
                codeBtn: false
            },
            loginForm: {
                account: '',
                password: '',
                verificationCode: ''
            },
            loginRules: {
                account: { required: true, trigger: 'blur', message: '请输入用户名' },
                password: { required: true, trigger: 'blur', message: '请输入密码' },
                verificationCode: { validator: validVerificationCode, trigger: 'blur' }
            },
            verificationCodeUrl: ''
        }
    },
    methods: {
        timeOutCon () {
            if (!this.timerMgr.timerCon) {
                this.timerMgr.countCon = 60
                this.timerMgr.showCon = false
                this.timerMgr.timerCon = setInterval(() => {
                    if (this.timerMgr.countCon > 0 && this.timerMgr.countCon <= 60) {
                        this.timerMgr.countCon--
                    } else {
                        this.timerMgr.showCon = true
                        clearInterval(this.timerMgr.timerCon)
                        this.timerMgr.timerCon = null
                    }
                }, 1000)
            }
        },
        getSmsCode () {
            if (!this.loginForm.phone) {
                this.$message.warning('请输入手机号')
                return
            }
            this.showLoading.codeBtn = true
            getSmsCode(this.loginForm.phone).then(({ message, code }) => {
                if (code === this.$constant.SUCCESS) {
                    this.timeOutCon()
                } else {
                    this.$message.error(message)
                }
                this.showLoading.codeBtn = false
            }).catch(e => {
                this.showLoading.codeBtn = false
            })
        },
        reloadVerificationCodeUrl () {
            this.verificationCodeUrl =
                axiosBaseUrl +
                '/api/v1/account/verificationCode?now=' +
                new Date().getTime()
        },
        handleLogin (name) {
            this.form.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    const loginForm = values
                    console.log('成功 ', loginForm)
                    this.showLoading.loginLoading = true
                    this.$store.dispatch('user/login', this.loginForm).then(async (code) => {
                        if (code === this.$constant.SUCCESS) {
                            // 获取按钮权限 菜单权限 和 个人信息
                            const [res, res1] = await Promise.all([
                                this.$store.dispatch('user/getBtnPermission'),
                                this.$store.dispatch('user/getPermission'),
                                this.$store.dispatch('user/getRoles'),
                                this.$store.dispatch('user/getInfo')
                            ])
                            if (res && res1) {
                                this.$router.push({ path: '/' })
                            }
                        }
                        this.reloadVerificationCodeUrl()
                        this.showLoading.loginLoading = false
                    }).catch((e) => {
                        this.showLoading.loginLoading = false
                    })
                } else {
                    console.log('失败')
                }
            })
        }
    },
    created () {
        this.reloadVerificationCodeUrl()
    },
    mounted () {
        if (this.loginForm.account === '') {
            this.$refs.account.focus()
        } else if (this.loginForm.password === '') {
            this.$refs.password.focus()
        }
    },
    beforeDestroy () {
        if (this.timerMgr.timerCon) {
            clearInterval(this.timerCon)
        }
    }
}
</script>
<style scoped lang="scss">
.jy-login {
    position: relative;
    height: 75vh;
    width: 61vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 2px 12px 0 rgba(152, 150, 150, 0.3);
    border-radius: 15px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 50px;
    justify-content: space-around;
    >img{
        width: 48%;
    }

    .login {
        height: 100vh;
        overflow-y: auto;
        width: 50%;

        .login-content {
            width: 375px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            position: absolute;
            padding-top: 0;
            right: 10%;
            top: 50%;
            transform: translateY(-50%);
            height: 600px;
            min-height: 600px;
            .system-name {
                height: 120px;
                line-height: 120px;
                font-size: 22px;
                //background-color: cyan;
                text-align: center;
                font-family: Source Han Sans CN;
                font-weight: 800;
                color: #333333;
            }

            .login-form {
                flex: 4;

                ::v-deep .a-input--small .a-input__inner {
                    line-height: 32px;
                    font-size: 16px;
                    font-weight: bold;
                    background: rgba(57, 57, 57, 0.07);
                    margin: 4.5px 0;
                    height: 54px;
                    border: none;
                    padding: 0 30px 0 60px;
                    background: #F4F4F4;
                    border-radius: 33px;
                    position: relative;
                }

                ::v-deep .ant-form-item:nth-child(3) {
                    .ant-form-item-children {
                        display: flex;
                        .code {
                            width: 150px;
                            line-height: 32px;
                            background: rgba(57, 57, 57, 0.07);
                            margin: 0 0 4.5px 5px;
                            height: 32px;
                            background: #FFFFFF;
                            border: 1px solid #9F7BFF;
                            border-radius: 33px;
                        }
                    }
                }
                ::v-deep .ant-form-item:nth-child(5) {
                    .ant-form-item-children {
                        display: flex;

                        .code {
                            width: 150px;
                            margin: 0px 0 4.5px 5px;
                            height: 32px;
                        }
                    }
                }
            }

            ::v-deep.ant-input-prefix {
                background: transparent;
                border: none;
                position: absolute;
                z-index: 99;
                left: 8px;
                top: 16px;
            }

            .jy-login-btn {
                border: none;
                margin-top: 20px;
                margin-bottom: 20px;
                text-transform: uppercase;
                color: white;
                position: relative;
                z-index: 2;
                font-weight: bold;
                font-size: 20px;
                background-size: 200% auto;
                width: 354px;
                height: 48px;
                background: linear-gradient(0deg, #AA82FF, #8A6CFF);
                border-radius: 33px;
            }

            .jy-login-btn:hover {
                background-position: right center;
            }

            ::v-deep .a-button--success{
                background-color: #9F7BFF;
                border-color: #9F7BFF;
                width: 163px;
                height:48px !important;
                border-radius: 33px;
            }
        }
    }
}

@media only screen and (min-width: 1324px) and (max-width: 1680px) {
    .bg-illustration {
        width: 100% !important;
        -webkit-animation: none !important;
        animation: none !important;
    }
}

@media only screen and (max-width: 1424px) {
    .img{
        opacity: 0;
    }
    @-webkit-keyframes slideIn {
        from {
            left: -100%;
            opacity: 0;
        }
        to {
            left: 0;
            opacity: 1;
        }
    }

    @keyframes slideIn {
        from {
            left: -100%;
            opacity: 0;
        }
        to {
            left: 0;
            opacity: 1;
        }
    }

    .bg-illustration {
        float: none !important;
        background: url("~@/assets/images/login/bg2.png") center center !important;
        background-size: cover !important;
        -webkit-animation: slideIn 0.8s ease-in-out forwards !important;
        animation: slideIn 0.8s ease-in-out forwards !important;
        width: 100% !important;
        height: 190px !important;
        text-align: center !important;

        img {
            width: 100px !important;
            height: auto !important;
            margin: 20px auto !important;
            text-align: center !important;
        }
    }
    .login {
        float: none !important;
        margin: 0 auto !important;
        width: 100% !important;
        position: absolute;
        height: 100%!important;

        .system-name {
            font-size: 25px !important;
            margin-top: 40px !important;
        }

        .login-content {
            -webkit-animation: slideIn 0.8s ease-in-out forwards !important;
            animation: slideIn 0.8s ease-in-out forwards !important;
            width: 85% !important;
            float: none !important;
            height: auto !important;
            position: absolute;
            left: 65px!important;
            top: 50%!important;
            transform: translateY(-50%)!important;
            .login-form {
                ::v-deep .a-input--small .a-input__inner {
                    height: 45px !important;
                    line-height: 45px !important;
                }
                ::v-deep .ant-form-item:last-child {
                    .ant-form-item-children {
                        display: flex;

                        .code {
                            height: 45px !important;
                        }
                    }
                }
            }

            .jy-login-btn {
                height: 50px !important;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
}
</style>
